<!DOCTYPE html>
<html lang="en">
<head>
    <title>ACE in Action</title>
    <style type="text/css" media="screen">
        /*#editor{*/
        /*    position: fixed;*/
        /*    top: 60%;*/
        /*    right: 0;*/
        /*    bottom: 0;*/
        /*    left: 0;*/
        /*}*/
        li{
            height: 60px;
        }
        .sample{
            height: 25px;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>




    <script src="http://cdn.bootcss.com/ace/1.2.4/ace.js"></script>
    <script src="http://cdn.bootcss.com/ace/1.2.4/ext-language_tools.js"></script>
    <script src="http://cdn.bootcss.com/ace/1.2.4/ext-old_ie.js"></script>
    <script src="http://cdn.bootcss.com/ace/1.2.4/theme-monokai.js"></script>

</head>
<body >

<div class="container-lg" style="margin-top: 20px;height:auto;">
    <blockquote class="blockquote" style="height: 10%">
        <h1>{$question.question_name}</h1>
        <footer class="blockquote-footer">题目ID : <cite title="Source Title">{$question.qid}</cite></footer>
    </blockquote>

    <br>
    <br>
    <div style="width: 100%;height: 90%;">
        <hr>
<!--        左区域信息展示-->
        <div style="width: 50%;height: 100%;float: left;">
            <p>{$question.description}</p>

            <dl class="row">
                <dt class="col-sm-3">输入格式</dt>
                <dd class="col-sm-9">{$question.input_style}</dd>

                <dt class="col-sm-3">输出格式</dt>
                <dd class="col-sm-9"><p>{$question.output_style}</p></dd>

                <dt class="col-sm-3">数据范围</dt>
                <dd class="col-sm-9">{$question.data_range}</dd>

                <dt class="col-sm-3">样例输入</dt>
                <dd class="col-sm-9">

                    {foreach $question.input_sample as $key => $input}
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="2" disabled>{$input}</textarea>
                    {/foreach}
                </dd>

                <dt class="col-sm-3">样例输出</dt>
                <dd class="col-sm-9">
                    {if()}
                    {foreach $question.output_sample as $key => $output}
                        <textarea class="form-control" id="exampleFormControlTextarea2" rows="2" disabled>{$output}</textarea>
                    {/foreach}
                </dd>
            </dl>

        </div>

<!--        右区域信息展示-->
        <div style="width: 50%;height: 100%;float: left;display: flex;justify-content: right;align-items: center">
            <ul class="list-group" style="width: 60%;">
                <li class="list-group-item">
                    难度
                    <div style="float: right">
                        {switch $question.difficulty}
                        {case 0}<span class="badge badge-success">简单</span>{/case}
                        {case 1}<span class="badge badge-warning">中等</span>{/case}
                        {case 2}<span class="badge badge-danger">困难</span>{/case}
                        {/switch}
                    </div>
                </li>
                <li class="list-group-item">
                    时空限制：
                    <div style="float: right">{$question.time_limit / 1000}s / {$question.space_limit / 1024}Mb</div>
                </li>
                <li class="list-group-item">
                    总通过数：<div style="float: right">{$question.total_pass_count}</div>
                </li>
                <li class="list-group-item">
                    总尝试数：<div style="float: right">{$question.total_attempt_count}</div>
                </li>
                <li class="list-group-item">
                    来源：<div style="float: right">{$question.resource}</div>
                </li>
                <li class="list-group-item">
                    {foreach $question.tag as $key => $t}
                    <span class="badge badge-dark">{$t}</span>
                    {/foreach}
                </li>
            </ul>
        </div>
        <hr>
        <div style="clear:both"></div>
    </div>


<!--控制器-->

    <div style="width: 100%;height:80px;">
        <div style="width: 70%;float: left;height:80px;">
            {if($state == false)}
            <button class="btn btn-danger disabled" type="button" style="float: right;width: 100px;margin-left: 10px">
                <span class="spinner-grow spinner-grow-sm loading_circle" role="status" aria-hidden="true" hidden></span>
                <span class="btn_text">比赛结束</span>
            </button>

            {else /}
            <button class="btn btn-primary submit_code" type="button" style="float: right;width: 100px;margin-left: 10px">
                <span class="spinner-grow spinner-grow-sm loading_circle" role="status" aria-hidden="true" hidden></span>
                <span class="btn_text">提 &nbsp;&nbsp;交</span>
            </button>
            {/if}


            <div class="alert alert-dark result" role="alert" style="float: right;width: 70%">
                未运行程序
            </div>

        </div>
        <div style="height: 80px;width: 30%;float: left;">



        </div>

<!--        &lt;!&ndash;编辑器&ndash;&gt;-->
<!--        <div id="editor" style="margin-top:1000px;">-->

<!--        </div>-->
    </div>
    <div class="card">
        <div class="card-header">

            <h5>CodeSky</h5>
            <button type="button" style="float: right;margin-left: 10px" class="btn btn-light"><i class="bi bi-sliders"></i></button>
            <!--        语言选择-->
            <select class="form-select form-select-lg mb-3 choice_language" aria-label=".form-select-lg example" style="float: right;height: 30px;width: 200px">
                <option value="c_cpp" selected>C_CPP</option>
                <option value="java">JAVA</option>
                <option value="python">Python</option>
                <option value="go">Go</option>
            </select>
<!--            主题选择-->
            <p style="float: right;height: 30px;font-size: 20px;margin-left: 10px">主题选择 : </p>
            <select class="form-select form-select-lg mb-3 choice_theme" aria-label=".form-select-lg example" style="float: right;height: 30px;width: 200px">
                <option value="monokai" selected>monokai</option>
                <option value="eclipse">eclipse</option>
                <option value="github">github</option>
                <option value="terminal">terminal</option>
                <option value="sqlserver">sqlserver</option>
                <option value="chrome">chrome</option>
                <option value="gob">gob</option>
                <option value="textmate">textmate</option>
                <option value="cobalt">cobalt</option>
                <option value="xcode">xcode</option>
                <option value="vibrant_ink">vibrant_ink</option>
                <option value="twilight">twilight</option>
                <option value="tomorrow">tomorrow</option>
                <option value="tomorrow_night">tomorrow_night</option>
                <option value="tomorrow_night_eighties">tomorrow_night_eighties</option>
                <option value="tomorrow_night_bright">tomorrow_night_bright</option>
                <option value="tomorrow_night_blue">tomorrow_night_blue</option>
                <option value="solarized_light">solarized_light</option>
                <option value="solarized_dark">solarized_dark</option>
                <option value="mono_industrial">mono_industrial</option>
                <option value="merbivore">merbivore</option>
                <option value="merbivore_soft">merbivore_soft</option>
                <option value="kuroir">kuroir</option>
                <option value="katzenmilch">katzenmilch</option>

            </select>
            <p style="float: right;height: 30px;font-size: 20px">语言选择 : </p>
        </div>

            <div class="card-body" id="editor" style="width: 100%;height: 800px;font-size: 20px">

            </div>
    </div>


</div>
<div class="isMatch" hidden>{$isMatch}</div>
<div class="mid" hidden>{$mid}</div>
<div class="qid" hidden>{$question.qid}</div>
<div class="difficulty" hidden>{$question.difficulty}</div>
<script>

    require('ace/ext/old_ie')
    ace.require("ace/ext/language_tools")
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.$blockScrolling = Infinity;
    editor.session.setMode("ace/mode/c_cpp");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    })

    $qid = $(".qid").text()
    difficulty = $(".difficulty").text()
    // 切换语言
    $(".choice_language").on("change",function () {
        editor.session.setMode("ace/mode/"+$(this).val());
    })
    //切换主题
    $(".choice_theme").on("change",function () {
        editor.setTheme("ace/theme/"+$(this).val());
    })
    $(".submit_code").click(function () {
        $(".result").addClass("alert-dark")
        if($.cookie("isLogin") == "false"){
            $(".if_body",parent.document.body).attr("src","../user.user/login")
            return
        }
        data = {
            "qid": $qid,
            "language": "c_cpp",
            "code": editor.getValue(),
            "uid": $.cookie("uid"),
            "difficulty": difficulty,
            "isMatch":$(".isMatch").text() === "1",
            "mid":$(".isMatch").text() === "1" ? $(".mid").text() : null
        }


        $(".btn_text").text("提交中")
        $(".submit_code").attr("disabled",true)
        $(".loading_circle").attr("hidden",false)
        $.post(
            "../judge_machine.CreateJudge/judge",
            data
            ,
            function (data,status) {
                $(".btn_text").text("提   交")
                $(".submit_code").attr("disabled",false)
                $(".loading_circle").attr("hidden",true)
                $(".result").removeClass("alert-dark")
                console.log(data)
                if(data.code === 40000){
                    $(".result").addClass("alert-success")
                }else{
                    $(".result").addClass("alert-danger")
                }

                if (data.code === 40005) {
                    // var errorMsg = "";
                    // for (msg of data.obj.inputOutput) {
                    //     errorMsg += msg
                    //     errorMsg += "\n"
                    // }
                    $(".result").text(data.obj.message + " : "+ data.obj.inputOutput);
                } else {
                    $(".result").text(data.obj.message + " 运行时间 : " + (data.obj.time / 1000) + "s 消耗内存 :" + (data.obj.space / 1024).toFixed(2) + " Mb")
                }
            }
        )
    })
</script>
</body>
</html>